import {DefaultLayoutManager, DefaultStyleManager} from '../base/base-managers.js';
import {IntSliderControl} from '../base/control-factory.js';


export class TerminalStyleManager extends DefaultStyleManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.selector = this.plugin.config.SELECTOR;
        this.keepBaseStyles = false; // 为避免样式重复，这里就选择不保留基础样式，因为设备预览已保留
    }

    getDynamicStyles() {
        const { PREVIEW_OUTPUT, PREVIEW_CONTAINER, PREVIEW_CONTENT } = this.constants;

        return `
            <style>
                .${this.selector} .widget-label {
                    text-align: left;
                    width: 55px;
                }
                .${this.selector} .${PREVIEW_CONTAINER} .${PREVIEW_CONTENT} .terminal-line {
                    display: flex;
                    align-items: center; /* 保持其他元素居中 */
                    position: relative;
                    .terminal-command-time {
                        margin-left: auto; /* 自动左外边距 */
                        padding-left: 1em; /* 添加间距避免紧贴边缘 */
                    }
                    .terminal-cursor-blink {
                        align-self: baseline; /* 光标对齐基线 */
                        width: 10px;
                        height: 1.2em;
                    }
                }
                .${PREVIEW_OUTPUT} .highlight .changed {
                    background-color: rgba(255, 235, 59, 0.3); /* 浅黄色背景 */
                    transition: background-color 0.3s ease;
                }
            </style>
        `
    }
}

export class TerminalLayoutManager extends DefaultLayoutManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.intSliderView = new IntSliderControl(this.plugin, "IntSlider");
    }

    initLayout() {
        const platformIcon = this.constants.PLATFORM_ICONS[this.constants.CONTROLS_CONFIG.platform.default];
        const shellIcon = this.constants.SHELL_ICONS[this.constants.CONTROLS_CONFIG.shell.default];

        const html_content = `
            <div class="${this.constants.PREVIEW_CONTAINER} 
                platform-${this.constants.CONTROLS_CONFIG.platform.default} 
                shell-${this.constants.CONTROLS_CONFIG.shell.default}">
                <div class=${this.constants.PREVIEW_TITLE}>
                    <p>${this.constants.CONTROLS_CONFIG.title.default}</p>
                </div>
                <div class="${this.constants.PREVIEW_CONTENT} docutils container">
                    <p class="terminal-path-line">📁~/CuttleInk</p>
                    <p class="terminal-line">
                        <span class="terminal-platform-icon">${platformIcon} </span>
                        <span class="terminal-shell-icon">${shellIcon} </span>
                        <span class="terminal-user">${this.constants.CONTROLS_CONFIG.user.default} </span>
                        <span class="terminal-sep">${this.constants.SEP_SYMBOL} </span>
                        <span>echo "Hello, Word!"</span>
                        <span class="terminal-cursor"></span>
                        <span class="terminal-command-time">${this.constants.TIME_SYMBOL} 1ms</span>
                    </p>
                </div>
            </div>
        `;
        this.plugin.$container.prepend(html_content);
    }

    updateLayout(reset) {
        const config = this.plugin.getConfig(reset, "update");
        this.plugin._log(`${reset? "重置预览": "更新预览"}，配置信息`, config, "info", this.constants.LOG_PREFIX);

        const $previewWrapper = $(`.${this.plugin.config.SELECTOR}`);
        const $preview = $previewWrapper.find(`.${this.constants.PREVIEW_CONTAINER}`);
        const $previewTitle = $preview.find(`.${this.constants.PREVIEW_TITLE} p`);
        const $previewPlatformIcon = $preview.find(`.${this.constants.PREVIEW_CONTENT} .terminal-line span.terminal-platform-icon`);
        const $previewShellIcon = $preview.find(`.${this.constants.PREVIEW_CONTENT} .terminal-line span.terminal-shell-icon`);
        const $previewUser = $preview.find(`.${this.constants.PREVIEW_CONTENT} .terminal-line span.terminal-user`);
        const $previewCursor = $preview.find(`.${this.constants.PREVIEW_CONTENT} .terminal-line span.terminal-cursor`);

        // 更新预览样式
        $preview.css({
            height: `${config.height}px`,
        }).removeClass((index, className) =>
                (className.match(/platform-\w+|shell-\w+/g) || []).join(' ')
            ).addClass(`platform-${config.platform} shell-${config.shell}`);

        // 更新标题
        $previewTitle.text(config.title);

        // 更新平台和 Shell 图标
        $previewPlatformIcon.text(`${this.constants.PLATFORM_ICONS[config.platform]} `);
        $previewShellIcon.text(`${this.constants.SHELL_ICONS[config.shell]} `);

        // 更新用户信息
        $previewUser.text(`${config.user} `);

        // 更新光标样式
        const blinkColor = config.blink ? config.color : "";
        const blinkInterval = config.blink ?  this.intSliderView.getSliderValue(config.interval, "interval") : "";
        const blinkClass = config.blink ? `terminal-cursor-blink terminal-cursor-${config.style}` : "";
        $previewCursor.removeClass((index, className) => (className.match(/terminal-cursor-\w+/g) || []).join(' '))
        $previewCursor.css({
            "--cursor-color": blinkColor,
            "--cursor-interval": blinkInterval,
        }).addClass(blinkClass);
    }
}